<template>
	<view>
		<li-statistics @openPopup="openPopup" mode="single" :fn="fn" :param.sync="param" :pageData.sync="pageData" :isLoaded.sync="isLoaded" v-on:afterLoaded="afterLoaded($event)">
			<template #li>
				<block v-if="isLoaded">
					<li-statistics-cards
						:cd="[
							{
								type: 2,
								list: [
									{
										text: `营业收入(元)`,
										value: pageData.sumAllAmount.toFixed(2)
									},
									{
										text: `较上周营业收入`,
										value: pageData.compareSumAllAmount.toFixed(2)
									}
								]
							},
							{
								type: 2,
								list: [
									{
										text: `营业额(元)`,
										value: pageData.sumAmount.toFixed(2)
									},
									{
										text: `较上周营业额`,
										value: pageData.compareSumAmount.toFixed(2)
									}
								]
							},
							{
								type: 2,
								list: [
									{
										text: `优惠金额(元)`,
										value: pageData.discountAmount.toFixed(2)
									},
									{
										text: `较上周优惠金额`,
										value: pageData.compareDiscount.toFixed(2)
									}
								]
							},
							{
								type: 2,
								list: [
									{
										text: `订单量(单)`,
										value: pageData.orderCount.toFixed(2)
									},
									{
										text: `较上周订单数`,
										value: pageData.compareOrderCount.toFixed(2)
									}
								]
							},
							{
								type: 2,
								list: [
									{
										text: `单均金额(元)`,
										value: pageData.averageConsume.toFixed(2)
									}
								]
							}
						]"
					/>
					<view class="item" v-show="!isShowCanvas">
						<view class="sub-title">营业趋势</view>
						<view class="charts-box">
							<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
						</view>
					</view>
					<view class="item mt-20">
						<view class="sub-title">消费指标</view>
						<li-statistics-cards :cd="consumeArray" />
					</view>
					<li-statistics-table :cd="columns" title="餐段分布" :dt="pageData.marketList" />
				</block>
			</template>
		</li-statistics>
	</view>
</template>

<script>
import date from '@/utils/date';
import liStatisticsMixin from '../../../mixins/liStatisticsMixin';

export default {
	mixins: [liStatisticsMixin],
	data: function () {
		return {
			isShowCanvas: false,
			navTitle: '营业概览',
			fn: 'GetBusinessOverview',
			param: {
				dataTimeRange: date.getToday()
			},
			consumeArray: [],
			columns: [
				{
					name: 'name',
					label: '餐段',
					fixed: true
				},
				{
					name: 'orderCount',
					label: '订单量',
					fixed: false,
					align: 'center'
				},
				{
					name: 'total',
					label: '营业额',
					fixed: false,
					align: 'center'
				},
				{
					name: 'sumAmount',
					label: '营业收入',
					fixed: false,
					align: 'center'
				}
			],
			ocd: [],
			opts: {
				padding: [15, 6, 0, 6],
				enableScroll: false,
				legend: { show: false },
				xAxis: {
					disableGrid: true,
					fontSize: 12,
					rotateLabel: true,
					marginTop: 10
				},
				yAxis: {
					data: [
						{
							min: 0
						}
					]
				},

				extra: {
					column: {
						type: 'group',
						width: 30,
						activeBgColor: '#000000',
						activeBgOpacity: 0.08,
						seriesGap: 5,
						barBorderRadius: [6, 6, 6, 6]
					}
				}
			}
		};
	},
	methods: {
		afterLoaded(e) {
			let ecData = {
				categories: e.trendChar.map((im) => im.day.slice(5, 17)),
				series: [
					{
						name: '',
						type: 'column',
						data: e.trendChar.map((im) => im.amount)
					}
				]
			};
			this.chartData = JSON.parse(JSON.stringify(ecData));

			let newArr = [];
			this.pageData.consumeIndex.forEach((element) => {
				newArr.push({
					type: 2,
					list: [
						{
							text: element.title,
							value: parseFloat(element.value).toFixed(2)
						},
						{
							text: '较上周',
							value: parseFloat(element.compareValue.split(' ')[1]).toFixed(2)
						}
					]
				});
				this.consumeArray = newArr;
			});
		},
		openPopup(val) {
			console.log(val);
			this.isShowCanvas = val;
			// 判断是否打开弹窗显示隐藏问题
		}
	}
};
</script>

<style lang="scss" scoped>
.item {
	border-radius: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 20rpx;
	background-color: #fff;
}

.charts-box {
	width: 100%;
	height: 300px;
}

.sub-title {
	font-size: 18px;
	font-weight: bold;
	margin: 8px 0;
}
</style>
